<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>Hello</div>
    <div class="one two">Hello World</div>
    <div class="two">Hello World</div>
    <div id="three">Hello World</div>
    <form name="login">Hello World</form>
    <nav class="nav">nav1</nav>
    <nav class="nav">nav2</nav>

    
</body>
</html>

<script>
//getElementByTagName() 方法搜索HTML标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例）,可以实时反映HTML文档的变化，如果没有任何匹配的元素，就返回一个空集
//如果传入*，就可以返回文档中的所有元素
var div1 = document.getElementsByTagName('div')[0]
div1.innerHTML = 'Hello World'
console.log(div1)
var div2 = document.getElementsByTagName('*')[6]
console.log(div2)

//getElementsByclassName() 方法返回一个类似数组的对象 （HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中
vardiv3 = document.getElementsByClassName('one two')[0]

//getElementByName() 方法用于选择用的name属性的元素HTML元素，（例如<from>、<radio>、<textarea>等），返回一个类似数组的对象（NodeList实例）,因为name属性相同的元素可能不止一个
var div4 = document.getElementsByName('login')[0]
console.log(div4)

//getElementByid() 方法返回匹配指定id属性的元素，如果没有匹配的元素，则返回null
var div5 = document.getElementById('three')
console.log(div5)

//querySelector()   方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配调节，则返回第一个
// 匹配的节点。如果没有发现匹配的节点，则返回null
var nav = document.querySelector('.nav');
nav.innerHTML = '这是nav1'
console.log(nav);

//querySelectorAll() 方法与 querySelector() 用法类似，区别是返回一个NodeList对象，包含所有匹配给定选择器的节点
var navs = document.querySelectorAll('.nav');

console.log(navs);

</script>